Skip to main content

HTML Foundations

Introduction to HTML, the most fundamental building block of web development.

I. HTML vs. CSS vs. JavaScript?​

Resources

General Definition​

  1. HTML and CSS are two languages that work together to create everything you see when you look at web pages on the Internet. HTML and CSS are used to display and present information, they are not used to program any logic, unlike JavaScript.
  • HTML: Hypertext Markup Language, is the raw data that the webpages are built out of. This data/information consists of texts, links, cards, lists, buttons, etc. → HTML puts information on a webpage.
  • CSS: Cascading Style Sheets, is what adds style to those plain elements (colors, font styles, layout, responsive features). → CSS makes the display of information on the webpage look great.
  1. JavaScript is a programming language that allows elements on your website more interactive and engaging for users.

II. Elements and Tags​

Resources

  1. Almost all elements in HTML consist of three parts:
  • an opening (<>) tag
  • a closing (</>) tag
  • the content that goes between these two tags.

Example: A paragraph element looks like this in HTML: <p> The texts in my paragraph </p>

  • <p>: the opening tag.
  • The texts in my paragraph: represent the data/content wrapped in by opening and closing tags.
  • </p>: the closing tag.
  1. Some HTML elements do not have closing tags, such as <br> or <img>. They’re known as void elements because there’s nothing inside them, they don’t wrap content in them like other tags do. These elements can also have self-closing tags: <br/> or <img/> but the use of self-closing tags is widely discouraged as they might make the element interact badly with other HTML features.

III. HTML Boilerplate​

Resources

All HTML documents have the same basic structure (boilerplate) that needs to be set in place for the HTML code to work.

Example: An HTML Boilerplate generated in VSCode using ! + enter shortcut:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body></body>

</html>
  1. DOCTYPE: Every HTML page starts with a doctype declaration, which tells the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5 → DOCTYPE html
  2. html element: the root element of the document, every other element in the document will be a descendent of it. The html element also has an opening and closing tag.
    • lang attribute: specifies the language of the text content, in this case, it’s English.
  3. head element: where we put meta-information about our web pages to render the webpage correctly. This is not where we put elements to display content/information on the page.
    • meta element: has the charset encoding of the webpage, which ensures the webpage will display symbols and characters from different languages correctly in the browser.
  4. title element: gives the webpage the title that’s displayed in the webpage’s browser tab. By default, the page has the “Document” title.
  5. body element: this element contains all the content that will be displayed on the webpage.

HTML Semantic​

Resource

The semantic HTML tags include:<article>, <section>, <nav>, <header>, <footer>, <aside>, <figure>, and <figcaption>. They’re called sectioning elements, and they look something like this: Using these as an alternative to <div> elements makes it easier for search engines, screen readers, and other machines to identify the different parts of your website. It also helps you as a developer keep your site organized, which, in turn, makes it easier to maintain.

  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <h2>Introduction</h2>
    <p>This section provides an overview of semantic HTML and its importance in web development...</p>
  </section>

  <article>
    <h2>Understanding Semantic HTML</h2>
    <p>Semantic HTML introduces meaning to the web content, making it more accessible and SEO-friendly...</p>
  </article>

  <aside>
    <h2>Related Articles</h2>
    <ul>
      <li><a href="#article1">How to Use Semantic HTML</a></li>
      <li><a href="#article2">Benefits of Semantic HTML</a></li>
    </ul>
  </aside>

  <figure>
    <img src="semantic-html.png" alt="Diagram of Semantic HTML elements">
    <figcaption>Figure 1: Diagram of Semantic HTML elements</figcaption>
  </figure>

  <footer>
    <p>&copy; 2024 My Website. All rights reserved.</p>
    <nav>
      <ul>
        <li><a href="#privacy">Privacy Policy</a></li>
        <li><a href="#terms">Terms of Service</a></li>
      </ul>
    </nav>
  </footer>

IV. HTML Text​

1. Paragraphs​

A paragraph element is defined by wrapping text content with a <p> tag.

<body>

	<p> Hello, this is my first paragraph in HTML </p>
	<p> This is another paragraph </p>

</body>

2. Headings​

Headings display larger and bolder texts in comparison to paragraphs. There are 6 different levels of headings starting from <h1> to <h6>, with the largest and most important heading being <h1> and the tiniest heading at the lowest level being <h6>

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
...
<h6>This is a heading 6</h6>

3. Strong element​

The <strong> element makes the text bold and semantically marks the text as important. → This means that tools (search tools, screen readers), will signify the text as more important. We can use the <strong> element along with other text elements.

<p> I am <strong>bold</strong> and <strong>important</strong>! </p>

4. Em element​

The <em element makes text italic and semantically places emphasis on the text, which may again affect relevant tools. We can use the <em> element along with other text elements.

<p> I am <em>italicized</em> and <em>emphasized</em>! </p>

V. HTML Lists​

1. Unordered Lists​

Unordered lists are created during the <ul> element, each item within the list is created using the list item element <li>, and each item is bullet-pointed by default.

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

2. Ordered Lists​

Ordered lists are created using the <ol> element, each item within the list is created using <li>, and each item is numbered by default.

<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ol>

3. Description Lists​

The description list is created using three main elements:

  1. <dl> - Description List: the container element that wraps the entire list.
  2. <dt> - Description Term: defines the term or name.
  3. <dd> - Description Details: provides the description or definition for the term.
<dl>
  <dt>Coffee</dt>
  <dd>A hot beverage made from roasted coffee beans.</dd>
  <dd>Often consumed in the morning for its caffeine content.</dd>
  
  <dt>Espresso</dt>
  <dt>Cappuccino</dt>
  <dd>Popular coffee drinks originating from Italy.</dd>
</dl>

Resources

0. Attributes in HTML​

An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.

1. Anchor elements​

To create a link in HTML, we use the anchor element, <a>. Anchor elements can be used to link to anything, videos, PDF files, and even other HTML documents.

  • The anchor element usually comes with an additional attribute href which contains the destination our link wants to go.
<a href="https://www.google.com">Click Me to Google!</a>

→ Any text wrapped with an anchor tag without the href attribute will look like plain text. The href attribute allows the browser to give the text a blue color and underline → signifying a link.

  • The target attribute specifies where the linked resource will be opened. By default, it will take the _self value, which opens the link in the current tab. We can set the target’s value to _blank to open the link in a new tab/window.
<a href="https://www.google.com" 
   target="_blank" 
   rel="noopener noreferrer">
Click me and open me in a new Tab.
</a>

→ It’s recommended to pair a target="_blank" with a rel="noopener noreferrer".

  • noopener value prevents the open link from gaining access to the webpage from which it was opened.
  • noreferrer value presents the opened link from knowing which webpage or resource has the link to it.

Generally, there are two kinds of links we will create:

  1. Links to pages on other websites on the Internet → absolute links.
    • A typical absolute link will look like this: protocol://domain/path
  2. Links to pages located on our own websites. → relative links.
    • Relative links will not include the domain name as it assumes the domain name will be the same as the page on which we created the link.

Example:

<body>
  <h1>Homepage</h1>
  <a href="https://www.theodinproject.com/about">An Absolute Link</a>

  <a href="pages/about.html">A Relative Link to the our About Page</a>
</body>

3. Images​

To display an image in HTML, we use the <img> element, which is an element that does not need a closing tag. The element doesn’t wrap content with an opening and closing tag, it embeds an image into the page using the src attribute, which tells the web browser where to locate the image. → The element can embed an image using both absolute/relative path through this src attribute.

 <img src="https://www.theodinproject.com/mstile-310x310.png">
 <img src="/images/my-image.jpg>
  • alt attribute: gives an alternative text to describe the image. This description will be used in place of the image it that image cannot be loaded.
<img src="https://www.theodinproject.com/mstile-310x310.png"
	 alt="the odin project logo">
  • height and width attributes determine the size of the image. It is recommended to always specify these attributes.
 <img src="https://www.theodinproject.com/mstile-310x310.png" alt="The Odin Project Logo" height="310" width="310">
Last updated on